<template>
  <div class="exchangeBox">
    <el-steps
      :active="active"
      finish-status="success"
      :align-center="true"
      class="steps"
    >
      <el-step title="1.提交申请信息" />
      <el-step title="2.卖家审核" />
      <el-step title="3.完成" />
    </el-steps>
    <div
      v-for="item in datas.oOrderDetails"
      :key="item.id"
      class="good"
    >
      <div class="top">
        <div class="ischecked">
          <el-checkbox
            v-model="item.chicked"
            @change="selectAll(item)"
          />
        </div>
        <div class="imgBoxs">
          <img
            :src="item.DefaultImage"
            alt=""
          >
        </div>
        <div class="detail">
          <div class="tls">
            {{ item.cProductName }}
          </div>
          <div class="price">
            ￥{{ item.fSalePrice }}
          </div>
        </div>
      </div>

      <div
        v-if="item.checked"
        class="tabBox"
      >
        <div class="tabR">
          <div
            v-for="(items, index) in titleList"
            :key="items.id"
            :class="{ active: item.selectType == index+1 }"
            @click="selectedTitle(item)"
          >
            {{ items.title }}
          </div>
        </div>
        <div v-if="titleIndex == 0">
          <el-form
            :inline="false"
            :label-position="labelPosition"
            label-width=""
            class="demo-form-inline"
          >
            <el-form-item label="退款原因:">
              <el-select
                v-model="item.reason"
                placeholder="请选择"
                @change="changeReason"
              >
                <el-option
                  v-for="items in reasonList"
                  :key="items.id"
                  :label="items.reason"
                  :value="items.reason"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="退款金额:">
              <el-input
                v-if="item.selectType == 2"
                v-model="item.price"
                placeholder="请输入金额"
              />
              <el-input
                v-if="item.selectType == 1"
                v-model="item.money"
                :readonly="true"
                placeholder="请输入金额"
              />
            </el-form-item>
            <el-form-item
              v-if="item.selectType == 2"
              label="退货数量:"
            >
              <div style="display: flex">
                <el-input-number
                  v-model="nums"
                  :max="item.iQuantity"
                  :min="1"
                  @change="changeNums"
                />
                <div style="margin-left:1rem">
                  最多{{ item.iQuantity }}件
                </div>
              </div>
            </el-form-item>
            <el-form-item label="退款说明:">
              <el-input
                v-model="item.con"
                type="textarea"
                style="width: 33.06rem"
                :maxlength="max"
                show-word-limit
                :autosize="{ minRows: 2, maxRows: 20}"
              />
            </el-form-item>
            <el-form-item label="上传凭证:">
              <el-upload
                :action="upLoadData()"
                list-type="picture-card"
                :on-success="success"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :data="fileData"
                :before-upload="beforeUpload(item)"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img
                  width="100%"
                  :src="dialogImageUrl"
                  alt=""
                >
              </el-dialog>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div
      class="subBtn"
      @click="submit"
    >
      发表
    </div>
  </div>
</template>

<script>
	import base from "../../api/base.js"
	export default {
		data() {
			return {
				max: 500,
				fileData: {
					filename: 'file'
				},
				nums: 0,
				labelPosition: "right",
				reason: "",
				reasonList: [],
				base: base,
				numList: [{
						id: 1,
						title: "1",
					},
					{
						id: 2,
						title: "2",
					},
					{
						id: 3,
						title: "3",
					},
					{
						id: 4,
						title: "4",
					},
					{
						id: 5,
						title: "5",
					},
					{
						id: 6,
						title: "6",
					},
				],
				dialogImageUrl: "",
				dialogVisible: false,
				disabled: false,
				active: 0,
				desc: "",
				num: 0,
				price: 0,
				orderNo: "",
				datas: "",
				id: "",
				titleList: [{
					id: 1,
					title: "我要退款",
				}, ],
				titleIndex: 0,
				order: {},
				cNextStatus: '',
				current: 0,
			};
		},
		mounted() {
			this.orderNo = this.$route.query.orderNo;
			console.log("this.orderNo", this.orderNo);
			this.getReasonContentList();
			this.getDetail(this.orderNo, this.$route.query.index);
		},
		methods: {
			changeReason() {
				console.log(this.reason);
				// item.reason = 
			},
			changeNums() {
				console.log(this.reason);
			},
			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleDownload(file) {
				console.log(file);
			},
			//切换
			selectedTitle(item) {
				if (item.selectType == 1) {
					item.selectType = 2
				} else {
					item.selectType = 1
				}
			},
			selectAll(item) {
				item.checked = !item.checked
				if (item.checked) {
					this.getReturnDetail(item)
				}
			},
			// 获取订单商品详情
			getDetail(orderNo) {
				let params = {
					token: localStorage.getItem("token"),
					data: {
						cOrderNo: orderNo,
					},
				};
				this.$api.person.getDetail(params).then((res) => {
					if (res.code == 200) {
						console.log("获取订单商品详情", res.data);
						res.data.oOrderDetails.forEach((item, index) => {
							let obj = {
								con: '',
								max: 500,
								reason: this.reasonList[0].reason,
								money: 0,
								num: 0,
								returnText: "我要退款",
								returnType: 1,
								showType: false,
								selectType: 1,
								price: '',
								numbers: '',
								limitPrice: 0,
								checked: false
							}

							this.$set(res.data.oOrderDetails, index, {
								...item,
								...obj
							})
							console.log(res.data.oOrderDetails[index])
						})
						this.datas = res.data;
						this.cNextStatus = res.data.cNextStatus
						if (res.data.cNextStatus != 'DELIVERGOODS') {
							this.titleList = [{
									id: 1,
									title: "我要退款"
								},
								{
									id: 2,
									title: "我要退货"
								}
							]



						} else {
							this.titleList = [{
								id: 1,
								title: "我要退款"
							}]
						}
						this.id = res.data.id;
						// this.id = res.data.oOrderDetails[index].id;
						// this.getReturnDetail(res.data.oOrderDetails[index].id)
						// if (this.id != '') {
						// 	this.getReturnDetail(this.id);
						// }
					}
				});
			},
			//获取退货商品详情
			getReturnDetail(item) {
				let params = {
					token: localStorage.getItem("token"),
					data: {
						iDetailId: item.id,
					},
				};
				this.$api.good.getReturnDetail(params).then((res) => {
					if (res.code == 200) {
						console.log(res.data);

						if (res.data.cNextStatus == "DELIVERGOODS") {
							item.num = 0
						} else {
							item.num = res.data.iQuantity
						}
						item.money = res.data.fCanReturnMoney

						item.price = res.data.fCanReturnMoney
						item.limitPrice = res.data.fCanReturnMoney
					}
				});
			},
			//获取退货原因
			getReasonContentList() {
				let params = {
					token: localStorage.getItem("token"),
				};
				this.$api.person.getReasonContentList(params).then((res) => {
					if (res.code == 200) {
						console.log(res.data);
						this.reasonList = res.data;

					}
				});
			},
			upLoadData() {
				return `${base.sq}/client/FileUpload/upload?size=M&terminaltype=PC`

			},
			beforeUpload(item) {
				this.currentitem = item
			},
			success(response, file, fileList) {
				console.log(response)
				console.log(file)
				console.log(fileList)
				let obj = []
				fileList.forEach(item => {
					obj.push(item.response.data.imgurl)
				})
				this.$set(this.currentitem, "imgUrl", obj.join(","))
			},
			// 提交退款申请
			submit() {
				// var that = this;
				console.log(this.current)
				if (this.current == this.datas.oOrderDetails.length) {
					this.$router.push({
						path: "/person/order",
						query: {},
					});

				}
				console.log("ddffd")
				if (this.datas.oOrderDetails[this.current]) {
					this.datas.oOrderDetails.forEach((item, index) => {
						if (this.current == index) {
							let quantity = item.numbers
							let money = null
							if (item.selectType == 2) {
								if (item.num == 0) {
									this.$message.error("未发货商品不能退货")

								} else {
									if (item.numbers <= item.num) {
										quantity = item.numbers
									} else {

										this.$message.error("退款数量不能大于总数量")
										return false
									}
								}

							}
							if (item.price <= item.limitPrice) {
								money = item.price
							} else {

								this.$message.error("退款金额不能大于总金额")
								return false
							}
							if (item.selectType == 1) {
								money = item.money
							}
							let params = {
								token: localStorage.getItem("token"),
								data: {
									iDetailId: item.id,
									reason: item.reason,
									quantity: quantity,
									money: money,
									description: item.con,
									imgUrl: item.imgUrl
								}
							};
							if(item.checked){
								this.$api.good.saleReturns(params).then((res) => {
									if (res.code == 200) {
										this.current++
										this.submit()
									} else {
										this.$message.error(res.message);
									}
								});
							}
							
						}
					})
				}

			}

		},
	};
</script>

<style scoped lang="scss">
	.imgContain {
		width: 4.69rem;
		height: 4.69rem;
		background: rgba(255, 255, 255, 1);
		border: 0.06px solid rgba(227, 227, 227, 1);
	}

	.el-form-item {
		display: flex;
		flex-direction: row;
	}

	.subBtn {
		width: 13.75rem;
		height: 3rem;
		background: rgba(240, 64, 111, 1);
		color: #fff;
		text-align: center;
		line-height: 3rem;
		font-size: 1rem;
		margin-left: 4.5rem;
		margin-top: 2.88rem;
		cursor: pointer;
	}

	.exchangeBox {
		margin-bottom: 2rem;
		.tabBox {
			background-color: #fff;
			padding: 3rem;
			margin-bottom: 1.6rem;

			.tabR {
				color: #777;
				font-size: 0.88rem;
				display: flex;
				flex-direction: row;
				margin-bottom: 2.44rem;

				>div {
					margin-right: 2rem;
					padding-bottom: 1rem;
					cursor: pointer;

					&.active {
						color: #f0406f;
						border-bottom: 0.31rem solid #f0406f;
					}
				}
			}
		}

		.good {
			background-color: #fff;
			padding: 2rem 1.85rem;
			margin-bottom: 1rem;
			display: flex;
			flex-direction: column;

			.top {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				align-content: center;

				.ischecked {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					width: 10%;
				}
			}

			.imgBoxs {
				width: 6rem;
				height: 6rem;
				background: rgba(255, 255, 255, 1);
				border: 0.06px solid rgba(227, 227, 227, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 3.44rem;

				img {
					object-fit: contain;
					width: 6rem;
					height: 6rem;
				}
			}

			.detail {
				color: #666;

				.tls {
					font-size: 1rem;
					line-height: 1.88rem;
				}

				.price {
					font-size: 1.67rem;
					line-height: 3.14rem;
				}

				.dls {
					font-size: 1rem;
					line-height: 1.88rem;
					cursor: pointer;

					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
</style>
<style>
	.el-steps {
		margin-bottom: 2.38rem;
	}

	.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #f03f6e !important;
		border-color: #f03f6e !important;
	}

	.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #999 !important;
	}

	.el-checkbox__inner:hover {
		border-color: #f03f6e !important;
	}

	.el-checkbox__input.is-focus .el-checkbox_inner {
		border-color: #f03f6e !important;
	}
</style>
